<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件监听绑定</title>
  </head>
  <body>

<style media="screen">
.blueP {

color: blue;

}


</style>


<div id="root">

<ul>

  <li v-for="name in names" > {{name}} </li>

  <!-- <li v-for="name in names" v-text="name"> </li> -->

</ul>

<input type="text" id="input" v-model="newName">

<!--写法1   -->
<!-- <input type="button"  value="添加" v-on:click="addName" > -->

<!--写法2 @   -->
<input type="button"  value="添加" @click="addName" >

<!--按 enter键 触发   -->
<span> 按键提起触发:</span>  <input type="text" id="input" v-model="newName" v-on:keyUp="addName" >



</div>





<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>


<script >


//使用vue绑定 ， 注意 Vue 的 V大写
var app = new Vue({
 el: '#root',
 data : {
 names:['joy','tom','jane'],
 newName: ''
 },

//函数
 methods: {
 
 //添加名字方法
 addName () {
    this.names.push(this.newName);
    this.newName='';
  }  

 }


});


</script>


  </body>
</html>
